<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商城分销明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>

    <link rel="stylesheet" href="../default/css/mui.min.css">
    <link rel="stylesheet" href="../default/css/index.css?V=201905221501">

    <style>
        .mui-row.mui-fullscreen > [class*="mui-col-"] {
            height: auto;
        }

        .mui-col-xs-3,
        .mui-control-content {
            overflow-y: auto;
            height: 100%;
        }

        .mui-segmented-control .mui-control-item {
            line-height: 50px;
            width: 100%;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            background-color: #fff;
        }

        .mui-bar {
            border-bottom: 1px solid #F5F5F5;
        }

        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item,
        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
            border: none;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item,
        .mui-segmented-control .mui-control-item,
        .mui-search .mui-placeholder .mui-icon {
            color: #666;
        }

        .mui-bar-nav ~ .mui-content {
            padding-bottom: 50px;
        }

        .mui-bar {
            background: rgba(255, 255, 255);
        }

        .mui-bar-nav.mui-bar .mui-icon span {
            font-weight: 500;
            font-size: 14px;
        }

        /*商城样式美化*/
        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item,
        .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
            display: inline-block;
            width: 32.333%;
            padding: 0;
            line-height: inherit;
        }
        #segmentedControlContents{
            background-color: #fff;
            /*margin-bottom: 100px;*/
        }
        .mui-content{
            padding-bottom: 50px;
        }
        .mui-control-item img {
            width: 40px;
            margin-top: 10px;
        }

        .mui-segmented-control {
            display: block;
        }

        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active p{
            color: #ffdb28;
            font-weight: 600;
        }
        .shop-list .shop-list-cent{
            width: 49%;
            padding: 10px;
            position: relative;
        }
        .shop-list .shop-list-cent img{
            width: auto;
            height: 200px;
        }
        .shop-list li:nth-child(2n-1){
            border-right: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
        }
        .shop-list li:nth-child(2n-2){
            border-bottom: 1px solid #f5f5f5;
        }
        .shop-list .shop-list-cent{
            margin-top: 0;
        }
        .shop-list-cent p {
            text-align: left;
        }
        .mui-col-xs-3, .mui-control-content{
            overflow-y: initial;
            display: block;
        }
        .shop-parc{
            display: flex;
        }
        .shop-parc span{
            flex:1
        }
        .shop-parc span:nth-child(2n-1){
            text-align: left;
        }
        .shop-parc span:nth-child(2n-2){
            text-align: right;
        }
        .shop-parc-box{
            padding: 5px;
        }
        .shop-list .shop-list-cent1{
            border: 0 !important;
            text-align: center;
            padding: 40px;
            position: relative;
        }
        #segmentedControls{
            background: #fff;
            border-top: 1px solid #f5f5f5;
            border-bottom: 1px solid #f5f5f5;
            padding: 10px 0;
        }
        .vip-shop-cit{
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 30px;
            background: url("https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/icon/vip-shop-cit.png") no-repeat;
            background-size: 100% 100%;
        }

        .mui-slider .mui-slider-group .mui-slider-item{
            text-align: center;
        }
        .mui-slider{
            background-color: #fff;
        }
        .mui-slider .mui-slider-group .mui-slider-item img{
            /*max-height: 400px;*/
            /*max-width: 500px;*/
            /*width: auto;*/
        }

        .mui-slider .mui-slider-group .mui-slider-item{
            height: 320px;
        }
        .mui-slider .mui-slider-group .mui-slider-item a img{
            width: 100%;
            height: 320px;
        }
        .mui-search .mui-input-clear{
            /*width: 80%;*/
            text-align: left;
            background-color:white;
        }
        .mui-search .mui-placeholder{
            text-align: left;
        }
        .mui-input-row .mui-input-clear~.mui-icon-clear{
            width: 0;
            height: 0;
        }
    </style>
</head>
<body>
<div  id="pullrefresh" class="mui-content mui-row mui-fullscreen">
    <div class="mui-scroll">
    <div id="slider" class="mui-slider" >
        <div class="mui-slider-group mui-slider-loop">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/shop/banner%20(3).jpg">
                </a>
            </div>
            <!-- 第一张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/shop/banner%20(1).jpg">
                </a>
            </div>
            <div class="mui-slider-item">
                <a href="#">
                    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/shop/banner%20(2).jpg">
                </a>
            </div>
            <div class="mui-slider-item">
                <a href="#">
                    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/shop/banner%20(3).jpg">
                </a>
            </div>
            <!--<div class="mui-slider-item">
                <a href="#">
                    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/shop/shop-banner1.jpg">
                </a>
            </div>-->
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/shop/banner%20(1).jpg">
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
            <!--<div class="mui-indicator"></div>-->
        </div>
    </div>

    <div class="mui-content-padded" style="margin: 5px;">
        <div class="mui-input-row mui-search">
            <input type="search" class="mui-input-clear" placeholder="请输入商品名称" id="searchs">
            <!--<button type="button" class="mui-btn mui-btn-primary mui-icon mui-icon-search">搜索</button>-->
        </div>
    </div>


    <div class="mui-col-xs-12" style="margin-top: -15px">
        <div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
            <!--<a class="mui-control-item" href="#content1">-->
                <!--<p>-->
                    <!--<img src=https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/huiyuan11.png>-->
                <!--</p>-->
                <!--<p>商城玩家</p>-->
            <!--</a>-->
        </div>
    </div>
    <div id="segmentedControlContents" class="mui-col-xs-12">
        <div id="content1" class="mui-control-content">
            <ul class="shop-list" id="index1">
                <!--<li class="shop-list-cent">-->
                    <!--<p>-->
                        <!--<img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/huiyuan11.png">-->
                    <!--</p>-->
                    <!--<div class="shop-parc-box">-->
                        <!--<p class="mui-ellipsis">电热蚊香液无味孕妇宝宝电蚊香器驱蚊家用</p>-->
                        <!--<div class="shop-parc">-->
                            <!--<span class="red mui-ellipsis">398阅读宝</span>-->
                            <!--<span>-->
                                <!--<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button>-->
                            <!--</span>-->
                        <!--</div>-->
                    <!--</div>-->
                <!--</li>-->
            </ul>
        </div>
        <div id="item1" class="mui-control-content mui-active">
        </div>
        <div id="item2" class="mui-control-content">
        </div>
        <div id="item3" class="mui-control-content">
        </div>
    </div>
    </div>
</div>

<!--<div id="pullrefresh" class="mui-content mui-scroll-wrapper">-->

    <!--<div class="mui-scroll">-->
        <!--&lt;!&ndash;数据列表&ndash;&gt;-->
        <!--<ul class="mui-table-view mui-table-view-chevron craftsman-list-ul" id="index1">-->
        <!--</ul>-->
    <!--</div>-->
<!--</div>-->


<!-- 底部导航 -->

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" id="index">
        <span class="mui-icon icon iconfont icon-xinwen"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" id="video">
				<span class="mui-icon icon iconfont icon-shipin">
					<!-- <span class="mui-badge">9</span> --></span>
        <span class="mui-tab-label">视频</span>
    </a>
    <a class="mui-tab-item mui-active" id="shops">
        <span class="mui-icon icon iconfont icon-shangcheng"></span>
        <span class="mui-tab-label">阅读宝商城</span>
    </a>
    <a class="mui-tab-item" id="task">
        <span class="mui-icon icon iconfont icon-task"></span>
        <span class="mui-tab-label">任务</span>

    </a>
</nav>

<script src="../default/js/jquery-2.14.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/cookie.js"></script>
<script src="../default/js/code.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/index.js" type="text/javascript" charset="utf-8"></script>
<script src="../default/js/public.js"></script>
<script>

    var slider = mui("#index1");
    slider.slider({
        interval: 3000
    });


    var id=1;

    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                auto: true,
                contentrefresh: '正在加载...',
                callback: function () {
                    queryUserAll(id)
                }
            }
        }
    });

    $(function () {
        queryshoplist();
    });


    mui('body').on('tap', '#index', function (e) {
        mui.openWindow({
            url: '../../index.html'
        });
    });
    mui('body').on('tap', '#video', function (e) {
        mui.openWindow({
            url: './video.html'
        });
    });
    mui('body').on('tap', '#shops', function (e) {
        mui.openWindow({
            url: './shops.html'
        });
    });
    mui('body').on('tap', '#task', function (e) {
        mui.openWindow({
            url: './task.html'
        });
    });



    $("#searchs").focus(function(){
        location.href='shop-modify.html';
    });

    mui('body').on('tap', '#shop-distribution', function (e) {
        mui.openWindow({
            url: 'shop-distributions.html'
        });
    });

    // 根据商品列表id跳转商品详情
    mui('body').on('tap', '.mui-control-item', function (e) {
        var id1 = this.getAttribute('data-shop-detail');
        //打开详情页面
        id=id1;
        $("#index1").html('');
        queryUserAll(id1);
    });

    // 根据商品列表id跳转商品详情
    mui('body').on('tap', '.shop-list-cent', function (e) {
        var id = this.getAttribute('data-shop-details');
        //打开详情页面
        mui.openWindow({
            url: 'shop-details.html?targetId=' + id
        });
    });

    function queryshoplist() {
        mui.showLoading("正在加载..", "div");
        $.ajax({
            url: website + '/CommodityClassificationController/queryAll1',
            type: 'post',
            success: function (data) {
                console.log(data);
                 var controls = document.getElementById("segmentedControls");
                 var contents = document.getElementById("index1");
                var html = [];
                // html.push('<a class="mui-control-item" id="shop-distribution" href="#content1"><p><img src="https://srhub.oss-cn-hangzhou.aliyuncs.com/zq-news/images/huiyuan11.png"></p><p class="mui-ellipsis">商城玩家</p></a>');

                data.data.forEach(function (one) {
                html.push('           <a class="mui-control-item" data-shop-detail="' + one.id + '" href="#content'+one.id+'">\n' +
                    '                <p>\n' +
                    '                    <img src='+one.encryptedName+'>\n' +
                    '                </p>\n' +
                    '                <p>'+one.classificationName+'</p>\n' +
                    '            </a>');
            });
                controls.innerHTML = html.join('');
                controls.querySelector('.mui-control-item').classList.add('mui-active');
                // contents.querySelector('.mui-control-content').classList.add('mui-active');
                mui.hideLoading();

            }
        });
    }
    var pageNumber;
    function queryUserAll(id) {
        mui('#pullrefresh').pullRefresh().refresh(true);
        console.log(1111);
        mui.showLoading("正在加载..", "div");
        var length = $('#index1 .shop-list-cent').length;
        if (length == 0) {
            pageNumber=0;
        } else if (length % 20 == 0) {
            pageNumber = length/20;
        }else{
            pageNumber=parseInt(length/20+1);
        }
        $.ajax({
            url: website + '/CommodityController/findByCommodityClassification',
            type: 'post',
            data: {
                commodityClassificationId:id,
                pageNumber: pageNumber,
                pageSize:20
            },
            success: function (data) {
                var html ='';
                data.data.forEach(function (two) {
                    if(two.trade_name!='58会员' && two.commodity_price != 398){
                        html+='<li class="shop-list-cent" data-shop-details="' + two.id + '"><p><img src="' + two.encrypted_name +
                            '" alt=""></p><div class="shop-parc-box"><p class="mui-ellipsis">' + two.trade_name + '</p><div class="shop-parc">';
                        if(two.commodity_reading_treasure==0 || two.commodity_reading_treasure=='' || two.commodity_reading_treasure==null){
                            html+='<span class="red mui-ellipsis">￥'+two.commodity_price+'</span><span><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">购买</button></span></div></div>';
                        }else if(two.commodity_price==0 || two.commodity_price == '' || two.commodity_price==null){
                            html+='<span class="red mui-ellipsis">'+two.commodity_reading_treasure+'阅读宝</span><span><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">兑换</button></span></div></div>';
                        }else {
                            html+='<span class="red mui-ellipsis">￥'+two.commodity_price+'+'+two.commodity_reading_treasure+'阅读宝</span><span><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">购买</button></span></div></div>';
                        }
                        if(two.designated_product=='是'){
                            html+='<div class="vip-shop-cit"></div>';
                        }
                        html+='</li>';
                    }
                });
                if (data.data.length == 0) {
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    mui.hideLoading();
                } else if (data.data.length < 20) {

                    if(pageNumber==0){
                        $("#index1").html(html);
                    }else{
                        $("#index1").append(html);
                    }
                    console.log(data.data.length);
                    // mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                    mui.hideLoading();
                } else {
                    if(pageNumber==0){
                        $("#index1").html(html);
                    }else{
                        $("#index1").append(html);
                    }
                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
                    mui.hideLoading();
                }
            },
            error: function () {
                /*mui.showLoading("发生错误,返回首页..", "div");
                setTimeout(function () {
                    window.location.href = '../index.html';
                }, 1000)*/
            }
        })
    }




</script>
</body>
</html>